<template>
  <!-- App 入口组件 -->
  <div class="app">
    <van-tabbar vue-router v-model="active" v-if="$route.meta.FooterNav">
      <van-tabbar-item icon="home-o" to="/home">主页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 组件缓存 -->
    <router-view v-slot="{Component}"> 
      <keep-alive>
        <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"></component>

    </router-view>
  </div>
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue'

const active = ref(0) // 底部路由导航选中参数
</script>

<style lang="less">
body {
  background-color: #f2f2f2;
}
</style>
